<template>
	<div>
		 <div class="status_bar"> 
		    <div class="top_div"></div>
		</div>
		<div class="content">
			<div class="searchbox">
				<input type="text" class="s_input" placeholder="搜索" v-model="searchtxt" return-key-type="search" @blur="search" />
			</div>
			<scroller class="scroller" scroll-direction="horizontal">
				<text @click="changeCity(-1)" :class="['scrollItem',curCity ==-1?'curItem':'']">推荐</text>
				<text @click="changeCity(inx,city.city_id)" :class="['scrollItem',curCity ==inx?'curItem':'']" v-for="(city,inx) in citys" :key="city.city_id"> {{city.city_name}} </text>
			</scroller>
			<scroller class="prolist" scroll-direction="vertical" @loadmore="loadMoreData" loadmoreoffset="30"> 
				<proitem :item="itm" v-for="(itm,inx) in list" :key="inx" @goInfo="goInfo(itm)" @follow="follow(itm)"></proitem>
				
			</scroller>
		</div>
	</div>
</template>

<script>
	import proitem from "@/components/pro-item.nvue";
	export default {
		components:{
			proitem
		},
		data(){
			return {
				searchtxt:"",//搜索文字
				curCity:-1,
				istuijian:"recommend",
				cityId:0,
				curPage:1,
				sys:{},
				list:[],
				loadinging:true,
				userInfo:{},
				account:{},
				citys:[]
			}
		},
		
		created(){
			var _this = this;
			uni.getStorage({ key:"$system" ,success(res) {
				_this.sys = res.data;
			}});
			//let result = new Promise()
			uni.getStorage({
				"key":"storage_key",
				success(e){
					_this.userInfo = e.data;
					_this.getData();
					if(_this.userInfo.ispass){
						uni.showToast({
							title: '账号已被查封，请与管理员联系',
							icon:"none" 
						});
						uni.navigateTo({
							url: '/pages/public/login/login'
						});
					}
				},
				fail(err){
					_this.getData();
					_this.getcitys(); 
				}
			})
			uni.getStorage({
				key:"citys",
				success: (e) => {
					if(new Date() - new Date(e.data.time)<1000 *60*60*24){
						console.log("time is not over",e.data.time)
						this.citys = e.data.citys;
					}
					else{
						this.getcitys();
					}
				}
			})
		},
		methods:{
			loadmoreasd(){
				console.log("loadmore");
			},
			follow(itm){
				let url = "";
				let _this = this;
				
				if(!_this.userInfo.uid){
					uni.showToast({
						icon:"none",
						title:"未登录！"
					})
					uni.navigateTo({
						url: '/pages/public/login/login'
					});
					return;
				}
				if(itm.isFollow==0){ url = "http://apptest.pinchao.cc/api.php/Store/follow"; }
				else{ url = "http://apptest.pinchao.cc/api.php/Store/delFollow"; }
				console.log(url)
				uni.request({
					url:url,
					method:"post",
					header:{
						app_version:'1.0.0',
						system_version:_this.sys.system,
						"Content-Type":"application/x-www-form-urlencoded"
					},
					data:{
						"store_id":itm.id,
						"access_token":_this.userInfo.access_token,
						"uid":_this.userInfo.uid
					},
					responseType:"arraybuffer",
					success(res) {
						//console.log(res)
						if(res.data.ret == '200'){
							console.log(res.data.msg,_this.userInfo.uid);
							 if(itm.isFollow==0){
								itm.isFollow =1;
								uni.showToast({
									title:"关注成功"
								})
							} 
							else {
								itm.isFollow =0;
								uni.showToast({
									title:"取消关注成功"
								})
							}
							
						}else{
							uni.showToast({
								icon:"none",
								title:res.data.msg
							})
						}
							
					},
					error(err){
						console.log("err:",err)
					}
				})
			},
			goInfo(itm){
				console.log("itm:",itm.id)
				uni.setStorage({
					key:"proId",
					data:itm
				})
				uni.navigateTo({
					url:"/pages/home/proInfo?id="+itm.id+"&token="+itm.access_token+"&uid="+itm.uid
				})
				
			},
			loadMoreData(){
				this.curPage++;				
				this.getData();
			},
			onloading(){
			},
			search(e){
				this.list = [];
				this.getData(this.istuijian,this.cityId);
			},
			go_info(e){
			},
			changeCity(inx,cityId){
				this.curCity = inx;
				this.curPage = 1;
				this.list =[];
				if(inx == -1){this.getData(); this.istuijian = "recommend"; this.cityId = 0;}
				else{
					
					this.istuijian = "city";
					this.cityId = this.citys[inx];
					this.getData("city",cityId);
				}
			},
			getcitys(){
				var _this = this;
				uni.request({
					url:"http://apptest.pinchao.cc/api.php/City/getList",
					method:"post",
					header:{
						app_version:'1.0.0',
						system_version:_this.sys.system,
						"Content-Type":"application/x-www-form-urlencoded"
					},
					
					responseType:"arraybuffer",
					success(res) {
						//console.log(res)
						if(res.data.ret == '200'){
							_this.citys = res.data.data; 
							let nowtime = new Date();
							//uni.setStorage("key":"citys","data":{"citys":_this.citys,"time":nowtime})
							uni.setStorage({
								key:"citys",
								data:{"citys":_this.citys,"time":nowtime}
							})
						}else{
							uni.showToast({
								icon:"none",
								title:res.data.msg
							})
						}
							
					},
					error(err){
						console.log("err:",err)
					}
				})
			},
			getData(str="recommend",cityId="0"){
				var _this = this;
				uni.request({
					url:"http://apptest.pinchao.cc/api.php/Store/getList",
					method:"post",
					header:{
						app_version:'1.0.0',
						system_version:_this.sys.system,
						"Content-Type":"application/x-www-form-urlencoded"
					},
					data:{
						"access_token":_this.userInfo.access_token,
						"uid":_this.userInfo.uid,
						"type":str,
						"keyword":this.searchtxt, 
						"city_id":cityId,
						"page":this.curPage
					},
					responseType:"arraybuffer",
					success(res) {
						
						if(res.data.ret == '200'){
							_this.list =_this.list.concat( res.data.data); 
						}else{
							uni.showToast({
								icon:"none",
								title:res.data.msg
							})
						}
							
					},
					error(err){
						console.log("err:",err)
					},
					complete() {
						_this.loadinging = false;
					}
				})
			},
		}
	}
</script>

<style>
	.listsaa{
		flex-direction: row;
	}
	.cellasd{
		flex-direction: row;
	}
	.prolist{
		width: 750upx;
		height: 1120upx;
	}
	
.status_bar{
		width: 750upx;
		height: 44upx;
		background-color: #000;
	}
.searchbox{
	width: 750upx;
	height: 84upx;
	background-color: #000;
}
.s_input{
	width: 702;
	height: 60upx;
	margin: 12upx 24upx;
	background-color: #fff;
	text-align: center;
}
.scroller{
	width: 750upx;
	height: 74upx;
	border-bottom-width: 1upx;
	border-bottom-style: solid;
	border-bottom-color: #E6E6E6;
	flex-direction: row;
}
.scrollItem{
	width: 80upx;
	height: 74upx;
	margin: 0 20upx;
	text-align: center;
	line-height: 74upx;
	display: inline-block;
	font-size: 32upx;
}
.curItem{
	border-bottom-width: 4upx;
	border-bottom-color: #DBC600;
}
</style>
